<template>
  <div class="resident-add-box">
    <!-- 标题 -->
    <mu-base-title title="新建居民档案" />
    <!-- 表单 -->
    <mu-resident-info ref="muResidentInfoRef" v-model:form-data="formData" :is-disable-name-input="false"
      :isSearchResident="false" :is-show-pwd-input="true" />
    <!-- 按钮 -->
    <div class="btn-box mu-btn-box-top-style">
      <el-button type="primary" class="update-btn" @click="onAdd">保存</el-button>
      <el-button @click="$router.back()" class="default-btn">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { addResidentApi } from '@/api/resident';
import { ref, useTemplateRef } from 'vue';
import { useRouter } from 'vue-router';

const muResidentInfoRef = useTemplateRef('muResidentInfoRef');

const router = useRouter();

// 表单 v-model 数据
const formData = ref<any>({});



// 事件：确认 按钮 点击
const onAdd = async () => {
  // 表单验证是否通过
  const muResidentInfoResult = await muResidentInfoRef.value?.onSubmit();
  if (muResidentInfoResult) {
    // 发请求
    addResident();
  }
};

// 请求：添加居民
const addResident = async () => {
  const res = await addResidentApi({
    ...formData.value
  });
  if (res.code == 200) {
    ElMessage.success('用户添加成功');
    router.back();
  } else {
    ElMessage.error(res.message);
  }
}

</script>

<style scoped lang="scss">
.resident-add-box {

  .btn-box {
    margin-top: 40px;
  }

  .update-btn {
    box-shadow: 0 0 8px var(--el-color-primary);
  }

  .remind-pass-btn {
    box-shadow: 0 0 8px #3DD4A7;
    color: #fff;
  }
}
</style>